<template>
  <div class="account_list_main">
    <con-title :topTitle="topTitle"/>

    <el-card class="box-card">
      <div class="max">
       <el-table :cell-style="center" :header-cell-style="center" :data="data.data" style="width: 100%">
             <el-table-column type="index" label="序号">
            </el-table-column>
            <el-table-column prop="account" label="账号" >
            </el-table-column>
            <el-table-column prop="username" label="用户名称" >
            </el-table-column>
            <el-table-column prop="type" label="类型">
              <template slot-scope="scope">
                {{scope.row.type | type}}
              </template>
            </el-table-column>
            <el-table-column prop="cTime" label="创建时间">
               <template slot-scope="scope">
                {{scope.row.cTime | Time}}
              </template>
            </el-table-column>
            <el-table-column prop="uTime" label="更新时间">
               <template slot-scope="scope">
                {{scope.row.uTime | Time}}
              </template>
            </el-table-column>
            <el-table-column prop="desc"  label="描述"> </el-table-column>
            <el-table-column  label="操作"> 
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
              <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </el-table-column>
          </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import {$accountList} from '@/api/api.js';
export default {
  name: "account_list",
  components: {
    ConTitle,
  },
  filters: {
    type(val){
      return val==1?'超级管理员':(val==2?'观察员':'管理员');
    },
    Time(val) {
      let date = new Date(Number(val));
      let year = date.getFullYear();
      let month = fillZero(date.getMonth() + 1);
      let day = fillZero(date.getDate());
      function fillZero(v) {
        return v < 10 ? "0" + v : v;
      }
      return `${year}-${month}-${day}`;
    },
  },
  data() {
    return {
      topTitle: {
        type: "子账号",
        text: "子账号列表",
        msg: "展示当前组织下的所有子账号，可修改子账号信息或删除子账号。",
      },
      data:{},
      center:{"text-align":"center"}
    };
  },
  created () {
    this.accountList();
  },
  methods: {
    accountList(){
      $accountList().then(res=>{
        console.log("账号列表:",res);
        this.data = res.data;
      })
    }
  }
};
</script>

<style scoped lang="scss">
.account_list_main {
  width: 100%;
  height: 100%;

  .box-card {
    margin-top: 10px;
  }
  .max {
    width: 100%;
    height: 100%;

   
  }
}
</style>